<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>我的评价</title>
	<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../../css/app.css" />
	<link rel="stylesheet" type="text/css" href="../../css/swiper.min.css" />
	<style type="text/css">
		body {
			background-color: #f5f5f5;
		}
		/*商品信息*/

		.goods-info-title:after {
			content: '';
			position: absolute;
			background-color: #690078;
			width: 2px;
			left: 0;
			height: 0.7rem;
			margin-top: 0.1rem;
		}

		.ping-star {
			display: inline-block;
			height: 0.9rem;
			margin-left: 0.01rem;
		}

		.aui-row-padded [class*=aui-col-xs-] {
			padding: 0.25rem;
		}

		.shop-comment {
			position: relative;
			font-size: 0.7rem;
			background-color: #F5F5F5;
			color: #999999;
			margin-top: 0.5rem;
			padding: 0.5rem;
			border-radius: 0.25rem;
		}

		.shop-comment:before {
			/*content: '';
			position: absolute;
			width: 0;
			height: 0;
			border-left: 9px solid transparent;
			border-right: 9px solid transparent;
			border-bottom: 14px solid #F5F5F5;
			top: -13px;
			left: 15px;*/
		}
	</style>
</head>

<body>
	<div id="app" v-cloak>
		<div class="goods-ping ming-bg-white aui-padded-r-10 aui-padded-l-10" >
			<div v-for="vo in info" class="goods-ping-list aui-border-b" style="padding-bottom: 1rem;">
				<div class="aui-info" style="padding: 1rem 0rem 0.5rem 0rem;">
					<div class="">
						<img class="aui-img-round" style="height: 1.5rem;" :src="vo.avatar" />
						<span class="aui-font-size-13 aui-text-default aui-padded-l-10" style="line-height: 1.5rem;">{{vo.nickname}}</span>
					</div>
					<div class="">
						<!--1星-->
						<img class="ping-star" src="../../image/icon/icon-star-active1.png" />
						<!--2星-->
						<img v-if="vo.star_num<2" class="ping-star" src="../../image/icon/icon-star.png" />
						<img v-if="vo.star_num>1" class="ping-star" src="../../image/icon/icon-star-active1.png" />
						<!--3星-->
						<img v-if="vo.star_num<3" class="ping-star" src="../../image/icon/icon-star.png" />
						<img v-if="vo.star_num>2" class="ping-star" src="../../image/icon/icon-star-active1.png" />
						<!--4星-->
						<img v-if="vo.star_num<4" class="ping-star" src="../../image/icon/icon-star.png" />
						<img v-if="vo.star_num>3" class="ping-star" src="../../image/icon/icon-star-active1.png" />
						<!--5星-->
						<img v-if="vo.star_num<5" class="ping-star" src="../../image/icon/icon-star.png" />
						<img v-if="vo.star_num>4" class="ping-star" src="../../image/icon/icon-star-active1.png" />
					</div>
				</div>
				<div class="aui-font-size-13 ming-text-hui">
					<span class="aui-padded-r-5">{{vo.create_time}}</span>
					<!-- <span class="aui-padded-r-5"  style="margin-left:0.5rem;">{{vo.good_sku_view}}</span> -->
					<span class="aui-padded-r-5">{{vo.good_sku}}</span>
					<!--<span class="aui-padded-r-5">38码</span>-->
				</div>
				<div class="aui-font-size-14 aui-text-default" style="padding: 0.2rem 0rem;margin-top:0;margin-bottom:0;">
					{{vo.content}}
				</div>
				<div class="aui-row aui-row-padded"  style="margin-top:0;padding: 0;">
					<!-- class="aui-col-xs-4"  -->
					<div v-for="item in vo.img" style="width:4rem;height:3.5rem;margin-top:0.3rem;margin-left:0.3rem;border-radius:0.02rem;float:left;">
						<!-- class="aui-img-round-5" -->
						<img  :src="item" style="width:4rem;height:3.5rem;border-radius:0.02rem;margin-left:0rem;" />
					</div>
				</div>
				<div v-if="vo.remark!=''" class="shop-comment">
					<strong>官方回复：</strong>
					<span>{{vo.remark}}</span>
				</div>
			</div>
		</div>
		<div v-if="info.length<1" class="aui-text-center" style="margin-top: 40%;">
			<img src="../../image/bg/bg-nomessage.png" style="width:7.55rem;margin: auto;margin-bottom:1.35rem" />
			<div class="aui-font-size-14 ming-text-hui6 aui-margin-t-10"  style="color:#B3B3B3 !important;">
				暂无评价
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			id: 0,
			info: [],
			page: 1,
			loadmore: true
		},
		methods: {
			get_list: function() {
				get_data('api/good/goodCommentList', {
					token: $api.getStorage('token'),
					good_id: vm.id,
					page: vm.page
				}, function(ret) {
					if (ret.status) {
						if (ret.data.length < 20) {
							vm.loadmore = false
						}
						ret.data.forEach(function(el) {
							vm.info.push(el)
							
						})
					}
				})
			}
		}
	})
	apiready = function() {
		vm.id = $api.getStorage('id')
		vm.get_list()
		fnInitPullRefresh(function() {
				vm.page = 1;
				vm.info = [];
				vm.loadmore = true;
				vm.get_list()
			})
			// 新版刷新
		refresh_new(function() {
			setTimeout(function() {
				vm.page = 1;
				vm.info = [];
				vm.loadmore = true;
				vm.get_list()
				api.refreshHeaderLoadDone()
			}, 1000)
		})
		fnInitScrollToBottom(function(ret) {
			if (vm.loadmore) {
				vm.page++;
				vm.get_list()
			}
		})
		// fnInitPullRefresh(function() {
		// 	vm.get_list();
		// 	api.refreshHeaderLoadDone();			
		// })

	}
</script>

</html>
